<template>
  <div style="padding: 24px">
    <a-card
      v-for="(question, index) in questions"
      :key="index"
      :title="`多选题 ${index + 1}`"
      style="margin-bottom: 24px"
    >
      <div class="question-title" v-html="question.contentChoice.title"></div>

      <a-checkbox-group
        v-model:value="question.userAnswer"
        :disabled="question.checked"
        style="margin: 16px 0; display: flex; flex-direction: column;"
      >
        <a-checkbox
          v-for="(option, i) in question.contentChoice.options"
          :key="i"
          :value="option[0]"
          style="margin-bottom: 8px"
        >
          {{ option }}
        </a-checkbox>
      </a-checkbox-group>

      <a-button
        type="primary"
        :disabled="!question.userAnswer.length || question.checked"
        @click="() => handleSubmit(question)"
      >
        提交答案
      </a-button>

      <div v-if="question.checked" style="margin-top: 16px">
        <a-collapse>
          <a-collapse-panel key="1" header="正确答案">
            <div>{{ question.answer }}</div>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="答案解析">
            <pre style="white-space: pre-wrap;">{{ question.analysis }}</pre>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits, defineExpose } from 'vue'
import { useRoute } from 'vue-router'
import { listQuestions } from "@/api/bizQuesstionController"

const emit = defineEmits(['answer-change'])
const route = useRoute()
const videoID = route.params.videoId
const questions = ref([])

onMounted(async () => {
  try {
    const res =await question({questionType: 2,
      questionTag: videoID,
      page: 1,
      size: 10})
    const list = res.data?.data?.records || []

    // 过滤多选题，questionType=2
    questions.value = list
      .filter(q => Number(q.questionType) === 2 && q.content)
      .map(q => {
        const contentChoice = JSON.parse(q.content)
        // 答案格式是字符串，比如 "ABCD"，转成数组 ['A','B','C','D']
        const answerArr = q.answer.split('')
        return {
          ...q,
          contentChoice,
          userAnswer: [],
          answerArray: answerArr,
          checked: false,
        }
      })
  } catch (error) {
    console.error('加载多选题失败：', error)
  }
})

function handleSubmit(question) {
  if (question.userAnswer.length > 0) {
    question.checked = true
  }
}
</script>

<style scoped>
.question-title {
  font-size: 16px;
  font-weight: 500;
}
</style>
